import Taro from '@tarojs/taro'
import { AtActivityIndicator, AtButton, AtFloatLayout, AtIcon, AtMessage, AtTabs, AtTabsPane, AtTag } from 'taro-ui'
import React, { Component, Dispatch } from 'react'
import { connect } from 'react-redux'
import { View, Button, Text, CoverView, Image } from '@tarojs/components'
import './index.scss'
import FooterCommon from '../..//components/common/FooterCommon'
import IndexHeader from '../../components/Header/IndexHeader'
import { getToken, getUser, setUser } from '../../actions/user'
import { loginWXMP, refershToken } from '../../actions/login'
import { locationUpdate } from '../../actions/location'
import { findCabinets, getCabinets } from '../../actions/cabinets'
import { setCabinetId, setLocationVisible } from '../../actions/global'
import User from '../../components/user/User'
import Shop from '../../components/shop/Shop'
import BatteryMap from '../../components/battery-map/BatteryMap'
import CarRentalMap from '../../components/car-rental-map/CarRentalMap'


// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

class Index extends Component {
  state = {
    current: 0,
    locationDetailVisible: false,
    footerValue: 0
  }

  componentWillReceiveProps (nextProps) {
  }

  componentWillUnmount () { }

  componentDidShow () {
    if (process.env.TARO_ENV === 'weapp') {
      this.props.updateCabinets()
      this.props.updateLocation()
      this.props.toLogin()
      Taro.getUserInfo({
        success: (res) => {
          this.props.setUser(res)
          console.log(res)
          console.log('授权成功')
        },
        fail: (e) => {
          console.error('未授权')
        }
      })
    }
  }

  componentDidHide () { }

  handleClick (value) {
    this.setState({
      current: value
    })
  }

  onFooterChange(value) {
    this.setState({
      footerValue: value
    },() => {
      console.log(this.state.footerValue)
    })
  }

  goZuche () {
    Taro.navigateTo({
      url: '/pages/store/Store?id=1',
    })
  }

  goCabinet () {
    Taro.openLocation({
      latitude: this.props.cabinet.place.coordinate.latitude,
      longitude: this.props.cabinet.place.coordinate.longitude,
      name: this.props.cabinet.name,
      address: this.props.cabinet.place.address
    })
  }

  handleClose () {
    this.props.setLocationVisible(false, '')
  }

  render () {
    let tabList = [{ title: '租电换电' }, { title: '租车买车' }, { title: '爱骑驿站' }]
    const indexComponent = () => {
      // debugger
      if (this.state.footerValue === 0) {
        return (
          <View className='map-container'>
            <AtTabs className='index-tabs' swipeable={false} current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <View style='flex: 1; display:flex; width: 300%;margin-top: 1px; box-sizing: border-box'>
                <AtTabsPane current={this.state.current} index={0}  customStyle='height: 100%; flex: 1;'>
                  <BatteryMap />
                  {/* <AxMap onMarkTap={this.onMarkTap.bind(this)} mapId='ax-cabinet-map'>
                  </AxMap> */}
                </AtTabsPane>
                <AtTabsPane current={this.state.current} index={1}  customStyle='height: 100%; flex: 1;'>
                  <CarRentalMap />
                  {/* <AxMap onMarkTap={this.onMarkTap.bind(this)} mapId='ax-car-map'>
                  </AxMap> */}
                </AtTabsPane>
                <AtTabsPane current={this.state.current} index={2}  customStyle='height: 100%; flex: 1;'>
                  <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>爱骑驿站开发中</View>
                </AtTabsPane>
              </View>
            </AtTabs>
            <AtFloatLayout isOpened={this.props.location.visible} scrollWithAnimation onClose={this.handleClose.bind(this)}>
              <View className='cabinet-box'>
                <AtActivityIndicator mode='center' isOpened={this.props.detailLogin}></AtActivityIndicator>
                <View
                  className='cabinet-box-logo'
                >
                  <Image
                    src={this.props.cabinet.photo || ''}
                    lazyLoad={true}
                    style='height: 100%;width: 100%'
                    mode='aspectFill'
                  >
                  </Image>
                </View>
                <View
                  className='cabinet-detail'
                >
                  <View className='cabinet-detail-item'>
                    <AtIcon value='home' size='16' color='#6190E8' customStyle='margin-right: .5rem'></AtIcon>
                    <View>
                      <Text style='margin-right: .2rem'>{this.props.cabinet.name}</Text>
                    </View>
                    <AtTag type='primary' active size='small' customStyle='margin-right: .2rem;'>旗舰店</AtTag>
                    <AtTag type='primary' active size='small' customStyle='margin-right: .2rem;'>24小时</AtTag>
                    <AtTag type='primary' active size='small'>可休息</AtTag>
                  </View>
                  <View className='cabinet-detail-item'>
                    <AtIcon value='clock' size='16' color='#6190E8' customStyle='margin-right: .5rem'></AtIcon>
                    <View>
                      <Text>{this.props.cabinet.openTime}-{this.props.cabinet.closeTime}</Text>
                    </View>
                  </View>
                  <View className='cabinet-detail-item'>
                    <AtIcon value='phone' size='16' color='#6190E8' customStyle='margin-right: .5rem'></AtIcon>
                    <View>
                      <Text>{this.props.cabinet.tel}</Text>
                    </View>
                  </View>
                  <View className='cabinet-detail-item'>
                    <AtIcon value='map-pin' size='16' color='#6190E8' customStyle='margin-right: .5rem'></AtIcon>
                    <View>
                      <Text>{this.props.cabinet.place.address}</Text>
                    </View>
                  </View>
                  <View className='cabinet-detail-item' style='display: flex;'>
                    <AtButton type='primary' customStyle='width: 100%; flex: 1; margin-right: 8px;' onClick={this.goZuche.bind(this)}>
                      <AtIcon value='lightning-bolt' size='18' color='#FFF'></AtIcon>
                      我要租车
                    </AtButton>
                    <AtButton type='primary' customStyle='width: 100%; flex: 1;' onClick={this.goCabinet.bind(this)}>
                      <AtIcon value='map-pin' size='18' color='#FFF'></AtIcon>
                      开始导航
                    </AtButton>
                  </View>
                </View>
              </View>
            </AtFloatLayout>
          </View>
        )
      } else if (this.state.footerValue === 1) {
        return (
          <View className='map-container'>
            {/* 123 */}
            <Shop />
          </View>
        )
      } else if (this.state.footerValue === 2) {
        return (
          <View className='map-container'>
            {/* 123 */}
            <User />
          </View>
        )
      } 
    }

    const headerComponent = () => {
      if (this.state.footerValue < 2) {
        return (
          <IndexHeader />
        )
      }
    }

    return (
      <View className='index'>
        {/* <IndexHeader /> */}
        {headerComponent()}
        {indexComponent()}
        <FooterCommon onFooterChange={this.onFooterChange.bind(this)} />
      </View>
    )
  }
}

// 将 reducer 中的状态插入到组件的 props 中
// 下面是单个reducer的时候，多个的时候需要选传入哪个reducer
// const { test, count } = state
const mapStateToProps = (state) => ({
  user: state.user,
  login: state.login,
  cabinets: state.cabinets.cabinets,
  detailLogin: state.cabinets.detailLogin,
  cabinet: state.cabinets.cabinet,
  location: state.global.location
})

// 将 对应action 插入到组件的 props 中
const mapDispatchToProps = (dispatch) => ({
  getUser () {
    dispatch(getUser())
  },
  getToken () {
    dispatch(getToken())
  },
  setUser (user) {
    dispatch(setUser(user))
  },
  refershToken (token) {
    dispatch(refershToken(token))
  },
  toLogin () {
    dispatch(loginWXMP())
  },
  updateLocation() {
    dispatch(locationUpdate())
  },
  updateCabinets () {
    dispatch(findCabinets())
  },
  getCabinets (id) {
    dispatch(getCabinets(id))
  },
  setCabinetId (id) {
    dispatch(setCabinetId(id))
  },
  setLocationVisible (visible, type) {
    dispatch(setLocationVisible(visible, type))
  }
})

// 使用 connect 高阶组件对 Counter 进行包裹
export default connect(mapStateToProps, mapDispatchToProps)(Index);
